<template>
  <div class="card7">
    <div class="card7-text">
      <div id="card3-left-text2-container">
        <span class="vertical-line1"></span>
        <p id="card7-text1">{{ $t('card7.text1') }}</p>
      </div>
    </div>
    <div class="card7-ph">
      <div class="card7-ph-container" ref="animationContainer"></div>
    </div>
  </div>
</template>

<script>
import {onMounted, ref, watch} from 'vue';
import lottie from 'lottie-web';
import card7Animation from '@/assets/card7.json';
import {useI18n} from "vue-i18n";

export default {
  name: 'MyCard7',
  setup() {
    const animationContainer = ref(null);
    const showImage = ref(false);
    const animationInstance = ref(null);

    const { locale } = useI18n();

    const startAnimation = () => {
      if (animationInstance.value) {
        animationInstance.value.goToAndStop(0, true); // 重置动画到开始
        animationInstance.value.play(); // 播放动画
        showImage.value = false; // 播放动画时隐藏图片
      }
    };

    const updateStyles = (lang) => {
      if (lang === 'en') {
        document.querySelector('#card7-text1').style.fontSize = '3vw';
      } else {
        document.querySelector('#card7-text1').style.fontSize = '2.9vw';
      }
    };

    watch(() => locale.value, (newLang) => {
      updateStyles(newLang);
    });

    onMounted(() => {
      animationInstance.value = lottie.loadAnimation({
        container: animationContainer.value,
        renderer: 'svg',
        loop: false,
        autoplay: false,
        animationData: card7Animation,
      });

      const observer = new IntersectionObserver(
          ([entry]) => {
            if (entry.isIntersecting && entry.intersectionRatio >= 0.8) {
              startAnimation();
            }
          },
          { threshold: [0.8] }
      );

      if (animationContainer.value) {
        observer.observe(animationContainer.value);
      }

      updateStyles(locale.value);
    });

    return {
      animationContainer,
      showImage,
    };
  },

};
</script>

<style scoped>
.card7 {
  width: 100%;
  height: 100%;
  background: url(@/assets/background8.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.card7-text {
  width: 100%;
  padding-top: 50px;
  display: flex;
  align-items: flex-start;
  padding-left: 70px;
}

#card7-text1 {
  font-size: 3vw;
  margin: 0;
  color: #2E75C9;
  font-family: "STSong", "华文中宋", serif;
}

.vertical-line1 {
  width: 0.6vw;
  height: 2.2vw;
  background-color: #2E75C9;
  margin-right: 10px;
}

.card7-ph {
  height: 50%;
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.card7-ph-container {
  position: relative;
  width: 100%;
  height: 100%;
}

#card3-left-text2-container {
  display: flex;
  align-items: center;
  margin: 0;
}


</style>
